<!--
 * @Author: your name
 * @Date: 2021-05-11 10:34:36
 * @LastEditTime: 2021-09-02 08:39:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo\src\Posts.vue
-->
<template>
  <div>
    <div id="myChart1" class="yi"></div>
    <div id="myChart2" class="er"></div>
    <div id="myChart3" class="san"></div>
    <div id="myChart4" class="si"></div>
    <div class="dd">
      <!-- <el-text style="color:cyan">根据天数查询</el-text> -->
      <el-select v-model="day" placeholder="天数内查询" @change="findCountOld()">
        <el-option
          v-for="item in options"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
  export default {
    name: "hello",
    data() {
      return {
        find: [],
        findday: [],
        // find1: [],
        // find7: [],
        options:["一","二","三","四","五","六",
          "七","八","九","十","十一","十二","十三",
          "十四","十五","十六","十七","十八","十九","二十",
          "二十一","二十二","二十三","二十四","二十五","二十六",
          "二十七","二十八","二十九","三十"],
        day:undefined,
        dayindex:undefined,
        daytime:undefined,
      };
    },
    mounted() {
      this.day='一';
      this.findCountOld()
      this.findCount();
    },
    methods: {
      findCountOld(){
        this.options.forEach((item,i)=>{
          if(item == this.day){
            console.log(item)
            console.log(this.day+"daydayday");
            this.dayindex = i+1
            console.log(this.dayindex)
            this.daytime = this.day
          }
        })
        this.findCountNew()
      },
      drawLine1() {
        // 基于准备好的dom，初始化echarts实例
        this.echarts.init;
        let myChart1 = this.echarts.init(document.getElementById("myChart1"));
        // 绘制图表
        myChart1.setOption({
          title: {
            text: "总数据扇形图统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          legend: {
            top: "bottom",
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["5%", "43%"],
              data: [
                { value: this.find[0].deal, name: "二手交易" },
                { value: this.find[0].errand, name: "跑腿任务" },
                { value: this.find[0].xiyouParttimeJob, name: "兼职" },
                { value: this.find[0].forum, name: "经验谈" },
                { value: this.find[0].lostaf, name: "失物招领" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 20,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      },
      drawLine2() {
        // 基于准备好的dom，初始化echarts实例
        this.echarts.init;
        let myChart2 = this.echarts.init(document.getElementById("myChart2"));
        // 绘制图表
        myChart2.setOption({
          title: {
            text: "总数据条形图统计",
            left: "center",
          },

          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
          },
          xAxis: {
            type: "category",
            data: ["二手交易", "跑腿任务", "兼职", "经验谈","失物招领"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                this.find[0].deal,
                this.find[0].errand,
                this.find[0].xiyouParttimeJob,
                this.find[0].forum,
                this.find[0].lostaf,
              ],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
      },
      drawLine3() {
        // 基于准备好的dom，初始化echarts实例
        this.echarts.init;
        let myChart3 = this.echarts.init(document.getElementById("myChart3"));
        // 绘制图表
        myChart3.setOption({
          title: {
            text: this.daytime+"日内扇形图统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          legend: {
            // orient: 'vertical',
            // left: 'left',
            top: "bottom",
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["5%", "43%"],
              data: [
                { value: this.findday[0].deal, name: "二手交易" },
                { value: this.findday[0].errand, name: "跑腿任务" },
                { value: this.findday[0].xiyouParttimeJob, name: "兼职" },
                { value: this.findday[0].forum, name: "经验谈" },
                { value: this.findday[0].lostaf, name: "失物招领" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 20,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      },
      drawLine4() {
        // 基于准备好的dom，初始化echarts实例
        this.echarts.init;
        let myChart4 = this.echarts.init(document.getElementById("myChart4"));
        // 绘制图表
        myChart4.setOption({
          title: {
            text: this.daytime+"日内条形图统计",
            left: "center",
          },

          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
          },
          xAxis: {
            type: "category",
            data: ["二手交易", "跑腿任务", "兼职", "经验谈","失物招领"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                this.findday[0].deal,
                this.findday[0].errand,
                this.findday[0].xiyouParttimeJob,
                this.findday[0].forum,
                this.findday[0].lostaf,
              ],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
      },
      findCount() {
        this.$http
          .get("http://localhost:9090/cpy/category/findCount")
          .then((response) => {
            this.find = response.data;
            console.log(response.data);
            console.log(this.find);
            this.drawLine1();
            this.drawLine2();
          });
      },
      findCountNew() {
        this.$http
          .get("http://localhost:9090/cpy/category/findCountNew", { params: { dayindex: this.dayindex } })
          .then((response) => {
            this.findday = response.data;
            console.log(response.data);
            console.log(this.findday);
            this.drawLine3();
            this.drawLine4();
          });
      },
    },
  };
</script>
<style>
  .yi {
    position: absolute;
    margin-left: 1px;
    height: 400px;
    width: 400px;
    top: 0%;
  }
  .er {
    position: absolute;
    margin-left: 1px;
    height: 400px;
    width: 400px;
    top: 60%;
  }
  .dd {
    position: absolute;
    margin-right: 1px;
    height: 400px;
    width: 120px;
    top: 0%;
    left: 45%;
  }
  .san {
    position: absolute;
    margin-right: 1px;
    height: 400px;
    width: 400px;
    top: 0%;
    left: 60%;
  }
  .si {
    position: absolute;
    margin-right: 1px;
    height: 400px;
    width: 400px;
    top: 60%;
    left: 60%;
  }
</style>
